<template>
  <div class="box">
    <div class="flex">
      <div class="leftImg">
        <!-- {{list.category|CATEGORY}} -->
        <img :src="list.category|CATEGORYIMG"
             style="width: 100%;" />
        <div class="item-choose-label  "
             :class="list.category=='A'?'item-choose-label-orange':list.category=='B'?'item-choose-label-primary':list.category=='C'?'item-choose-label-green':'item-choose-label-yellow'">{{list.category|CATEGORY}}</div>
      </div>
      <div class="right">
        <el-row>
          <el-col><a style="cursor: pointer;color:black;font-weight:600;font-size:20px;padding-left:20px;"
               @click="subjectResultDetail(list.subjectId)">{{list.title}}</a></el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-tag style="margin-left:20px"
                    v-if="list.areaName">
              {{list.areaName}}
            </el-tag>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20"
                  style="padding-left:20px;">
            <span>规划编码：<span style="dispaly:inline-block;color:#409EFF">{{list.pmuc}} </span></span>
            <span>发布时间：{{list.releaseDate}}</span>
            <span>责任部门：{{list.deptName}}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20"
                  style="padding-left:20px;">
            <span>课题概述：{{list.description}}</span>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { getFileTypeFiles, getFileTypeFile } from '@/views/util'
import { PROJECT_DIC } from '@/const/dict'

export default {
  name: "searchTable",
  filters: {
    CATEGORYIMG (val) {
      switch (val) {
        case "A":
          return "img/develop.png";
        case "B":
          return "img/special.png";
        case "C":
          return "img/area.png";
        case "D":
          return "img/space.png";
      }
    },
    APPROVING_AUTHORITY_LEVEL (val) {
      switch (val) {
        case "A":
          return "国家";
        case "B":
          return "省级";
        case "C":
          return "设区市";
        case "D":
          return "县（市、区）";
      }
    },
    CATEGORY (val) {
      switch (val) {
        case "A":
          return "发展规划(纲要)";
        case "B":
          return "专项规划";
        case "C":
          return "区域规划";
        case "D":
          return "空间规划";
      }
    },
    PLANNING_RANK (val) {
      switch (val) {
        case "A":
          return "重点";
        case "B":
          return "一般";
        case "C":
          return "备案";
        default:
          return '一般';
      }
    },
    APPROVING_AUTHORITY_NATURE (val) {
      switch (val) {
        case "A":
          return "党委";
        case "B":
          return "人大";
        case "C":
          return "政府";
        case "D":
          return "发展改革部门";
        case "E":
          return "其它部门";
      }
    }
  },
  props: {
    list: {
      type: Object
    },
  },
  data () {
    return {
    }
  },
  methods: {
    // 课题详情跳转
    subjectResultDetail (subjectId) {
      let src = `/subject/detail?id=${subjectId}`;
      this.$router.push({
        path: src
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.el-col-2 {
  text-align: right;
}
.el-col-6 {
  padding-left: 10px;
}
.el-col {
  line-height: 32px;
  > span {
    margin-right: 16px;
  }
}
.box {
  padding: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin-bottom: 10px;
}
.el-tag {
  font-size: 16px;
  font-weight: 600;
  min-height: 32px;
  height: auto;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.leftImg {
  height: 150px;
  width: 130px;
  margin-left: 20px;
  padding: 0 10px;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
}

.right {
  flex-grow: 4;
}
.item-choose-label-orange {
  background-color: #00b7ee;
}

.item-choose-label-primary {
  background-color: #f65c4c;
}

.item-choose-label-green {
  background-color: #86d46e;
}

.item-choose-label-yellow {
  background-color: #f8b551;
}

.item-choose-label {
  border-radius: 4px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
</style>
